<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-plan-detail-edit" th:object="${planConfigDetail}">

			<input name="planCfgItemRecordid"  type="hidden"  th:field="*{planCfgItemRecordid}" />
			<input id="planCfgItemPlanId" name="planCfgItemPlanId" type="hidden" th:field="*{planCfgItemPlanId}" />
			<input id="planCfgItemId" name="planCfgItemId" type="hidden" th:field="*{planCfgItemId}" />

			<div class="form-group">
				<label class="col-sm-3 control-label">计划子项目类型：</label>
				<div class="col-sm-8">
					<select id="planCfgItemType" name="planCfgItemType" onchange="itemTypeChange()" class="form-control m-b" th:field="*{planCfgItemType}" th:with="type=${@dict.getType('plan_item_type')}">
						<option value="">-&#45;&#45;请选择-&#45;&#45;</option>
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label ">子项目名称：</label>
				<div class="col-sm-8">
					<select id="planCfgItemName" name ="planCfgItemName" class="form-control m-b" value="*{planCfgItemId}"></select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label ">子项目权重：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="planCfgItemWeight" id="planCfgItemWeight" th:field="*{planCfgItemWeight}"/>
				</div>
			</div>

		</form>
	</div>
	<div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
	<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>
	<script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>
	<script th:src="@{/js/vue.js}"></script>
	<script type="text/javascript">
		var prefix = ctx + "plan/config/detail";
	
		function submitHandler() {
	        if ($.validate.form()) {
	        	window.itemEdit.edit();
	        }
	    }

	    function itemTypeChange(){
			window.itemEdit.itemTypeChange();
		}

		window.itemEdit=new Vue({
			el:"#form-plan-detail-edit",
			data:{
				itemOption:[]
			},
			created:function(){

			},
			mounted:function(){
				this.itemTypeChange();
				this.formValidate();
			},
			methods: {
				formValidate: function(){
					var _this=this;
					$("#form-plan-detail-edit").validate({
			        	rules:{
							planCfgItemWeight:{
								required:true,
        						number:true,
        						range:[0,1]
							}
						}
			        });
				},
				itemTypeChange: function(){
					var _this=this;
					var _urlTmp = "plan/config/detail/selectPlanItemByType";
					var _itemType = $("#planCfgItemType option:selected").val();

					$.ajax({
		        		cache : true,
		        		type : "GET",
		        		url : ctx + _urlTmp,
		        		data : {
		        			"param": $("#planCfgItemPlanId").val() + "#"+_itemType
		        		},
		        		async : false,
		        		error : function(request) {
		        			$.modal.alertError("系统错误");
		        		},
		        		success : function(data) {
		        			_this.itemOption=[];
		        			_this.itemOption=data;
		        			$("#planCfgItemName").empty();
		        			var html_str="";
		        			for(var i=0;i<_this.itemOption.length;i++){
		        				html_str+='<option  value="'+_this.itemOption[i].itemId+'" >'+_this.itemOption[i].itemName+'</option>';
		        			}
		        			 $("#planCfgItemName").append(html_str);
		        		}
		        	});
				},
				edit:function() {
					var planCfgItemType = $("#planCfgItemType option:selected").val();
					var planCfgItemRecordid = $("input[name='planCfgItemRecordid']").val();
					var planCfgItemPlanId = $("input[name='planCfgItemPlanId']").val();
					var planCfgItemId = $("#planCfgItemName option:selected").val();
					var planCfgItemName = $("#planCfgItemName option:selected").text();
					var planCfgItemWeight = $("input[name='planCfgItemWeight']").val();

					$.ajax({
						cache : true,
						type : "POST",
						url : prefix + "/edit",
						data : {
							"planCfgItemType": planCfgItemType,
							"planCfgItemRecordid": planCfgItemRecordid,
							"planCfgItemPlanId": planCfgItemPlanId,
							"planCfgItemId": planCfgItemId,
							"planCfgItemName": planCfgItemName,
							"planCfgItemWeight": planCfgItemWeight
						},
						async : false,
						error : function(request) {
							$.modal.alertError("系统错误");
						},
						success : function(data) {
							$.operate.saveSuccess(data);
						}
					});
				}
			}
		})

	</script>
</body>
</html>
